<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{% block title %}测试 - layui{% endblock %}</title>
    {% block css %}
    <link rel="stylesheet" href="{{ url_for('static',filename="layui/css/layui.css") }}">
    {% endblock %}
</head>
<body>
{% block nav %}
<div class="layui-row" style="padding:15px 15px 0px 15px">
    <span class="layui-breadcrumb" lay-separator="/">
	{% for k,v in Fdata.nav.items() %}
	{% if v[0]==Fdata.title %}
	<a href="{{ v[1] }}" class="layui-this"><b><i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"></i> {{ v[0] }}</b></a>
	{% else %}
	<a href="{{ v[1] }}">{{ v[0] }}</a>
	{% endif %}
	{% endfor %}
    </span>
	<div class="layui-progress" style="margin: 15px 0 15px;">
	    <div class="layui-progress-bar" lay-percent="100%"></div>
	</div>
	<span class="layui-breadcrumb" lay-separator="|">
	{% for k,v in Fdata.nav2.items() %}
	{% if v[0]==Fdata.title2 %}
	<a href="{{ v[1] }}" class="layui-this"><b><i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"></i> {{ v[0] }}</b></a>
	{% else %}
	<a href="{{ v[1] }}">{{ v[0] }}</a>
	{% endif %}
	{% endfor %}
	</span>

	<hr>

</div>
{% endblock %}

{% block main %}
<div class="layui-container">
    
    <div class="layui-btn-container">
	<button class="layui-btn" test-active="test-form">一个按钮</button>
	<button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
    </div>
    
    <blockquote class="layui-elem-quote" style="margin-top: 30px;">
	<div class="layui-text">
	    <ul>
		<li>你当前预览的是：<span>layui-v<span id="version"></span></span></li>
		<li>这是一个极其简洁的演示页面</li>
	    </ul>
	</div>
    </blockquote>
</div>
{% endblock %}


{% block js_src %}
<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="{{ url_for('static',filename="layui/layui.js") }}"></script>
{% endblock %}

{% block mod %}
<script type="text/javascript">
layui.config({
	base: '{{ url_for('static',filename="layui/") }}'            //自定义layui组件的目录
}).extend({ //设定组件别名
	common:'common',
});
</script>
{% endblock %}

{% block js %}
<script>
layui.use(function(){
    var layer = layui.layer
    ,form = layui.form
    ,laypage = layui.laypage
    ,element = layui.element
    ,laydate = layui.laydate
    ,util = layui.util;
    
    //欢迎信息
    layer.msg('Hello World');
    
    //输出版本号
    lay('#version').html(layui.v);
    
    //日期
    laydate.render({
	elem: '#test2'
	,value: new Date()
	,isInitValue: true
    });
    
    //触发事件
    util.event('test-active', {
	'test-form': function(){
	    layer.open({
		type: 1
		,resize: false
		,shadeClose: true
		,content: ['<ul class="layui-form" style="margin: 10px;">'
		    ,'<li class="layui-form-item">'
			,'<label class="layui-form-label">输入框</label>'
			,'<div class="layui-input-block">'
			    ,'<input class="layui-input" name="field1">'
			,'</div>'
		    ,'</li>'
		    ,'<li class="layui-form-item">'
			,'<label class="layui-form-label">选择框</label>'
			,'<div class="layui-input-block">'
			    ,'<select name="field2">'
				,'<option value="A">A</option>'
				,'<option value="B">B</option>'
			    ,'<select>'
			,'</div>'
		    ,'</li>'
		    ,'<li class="layui-form-item" style="text-align:center;">'
			,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
		    ,'</li>'
		,'</ul>'].join('')
		,success: function(layero){
		    layero.find('.layui-layer-content').css('overflow', 'visible');
		    
		    form.render().on('submit(*)', function(data){
			layer.msg(JSON.stringify(data.field));
		    });
		}
	    });
	}
    });
});
</script>
{% endblock %}

</body>
</html>
